<template>
  <div style="display: flex; width: 1360px; height: 900px; overflow: auto">
    <div style="width: 33%; height: 900px; overflow: auto; border: 1px solid black">
      <component
        :is="item.com"
        v-for="(item, idx) in portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === 1)"
        :key="idx"
      ></component>
      <div
        v-if="isEdit"
        style="width: 90%; height: 200px; margin: 0 auto; text-align: center; border: 1px solid black; cursor: pointer"
        @click="$emit('addPortlet', { parentId: layoutId, parentSection: 1 })"
      >
        <svg
          t="1667198746702"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4608"
          width="200"
          height="200"
        >
          <path
            d="M935.2 537.1H90.8c-14 0-25.3-11.3-25.3-25.3s11.3-25.3 25.3-25.3h844.5c14 0 25.3 11.3 25.3 25.3s-11.4 25.3-25.4 25.3z"
            fill="#4F4F4F"
            p-id="4609"
          ></path>
          <path
            d="M513 959.4c-14 0-25.3-11.3-25.3-25.3V89.6c0-14 11.3-25.3 25.3-25.3s25.3 11.3 25.3 25.3V934c0 14-11.3 25.4-25.3 25.4z"
            fill="#4F4F4F"
            p-id="4610"
          ></path>
        </svg>
      </div>
    </div>
    <div style="width: 33%; height: 900px; overflow: auto; border: 1px solid black">
      <component
        :is="item.com"
        v-for="(item, idx) in portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === 2)"
        :key="idx"
      ></component>
      <div
        v-if="isEdit"
        style="width: 90%; height: 200px; margin: 0 auto; text-align: center; border: 1px solid black; cursor: pointer"
        @click="$emit('addPortlet', { parentId: layoutId, parentSection: 2 })"
      >
        <svg
          t="1667198746702"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4608"
          width="200"
          height="200"
        >
          <path
            d="M935.2 537.1H90.8c-14 0-25.3-11.3-25.3-25.3s11.3-25.3 25.3-25.3h844.5c14 0 25.3 11.3 25.3 25.3s-11.4 25.3-25.4 25.3z"
            fill="#4F4F4F"
            p-id="4609"
          ></path>
          <path
            d="M513 959.4c-14 0-25.3-11.3-25.3-25.3V89.6c0-14 11.3-25.3 25.3-25.3s25.3 11.3 25.3 25.3V934c0 14-11.3 25.4-25.3 25.4z"
            fill="#4F4F4F"
            p-id="4610"
          ></path>
        </svg>
      </div>
    </div>
    <div style="width: 33%; height: 900px; overflow: auto; border: 1px solid black">
      <component
        :is="item.com"
        v-for="(item, idx) in portletList.filter((m) => m.params.parentId === layoutId && m.params.parentSection === 3)"
        :key="idx"
      ></component>
      <div
        v-if="isEdit"
        style="width: 90%; height: 200px; margin: 0 auto; text-align: center; border: 1px solid black; cursor: pointer"
        @click="$emit('addPortlet', { parentId: layoutId, parentSection: 3 })"
      >
        <svg
          t="1667198746702"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4608"
          width="200"
          height="200"
        >
          <path
            d="M935.2 537.1H90.8c-14 0-25.3-11.3-25.3-25.3s11.3-25.3 25.3-25.3h844.5c14 0 25.3 11.3 25.3 25.3s-11.4 25.3-25.4 25.3z"
            fill="#4F4F4F"
            p-id="4609"
          ></path>
          <path
            d="M513 959.4c-14 0-25.3-11.3-25.3-25.3V89.6c0-14 11.3-25.3 25.3-25.3s25.3 11.3 25.3 25.3V934c0 14-11.3 25.4-25.3 25.4z"
            fill="#4F4F4F"
            p-id="4610"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    portletList: { type: Array, default: () => [] },
    isEdit: { type: Boolean, default: true },
    layoutId: { type: Number, default: null },
  },
}
</script>
